@import (reference) "../../../../app/less/app-icons";
@import (reference) '../../../../app/less/typography';
@import (reference) '../../../../ui/directives/smartTable/smart-table';
@import (reference) 'config';
@import (reference) 'icons';

.main.wallet.portfolio {

  .w-visible {
    flex-wrap: wrap;
    @media screen and (min-width: 769px) {
      height: 65px !important;
    }
  }

  .mobiles-only {
    display: none;
  }

  .portfolio-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .toolbar {
    position: relative;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;

    w-select {
      width: 100%;
      max-width: 250px;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 3;

      .title {
        display: flex;
        padding-left: 40px;
        .icon-filter();
        background-position: 15px center;
      }
    }
  }

  .btn-icon {
    font-family: @font-roboto-medium;
  }

  .part {
    display: inline-block;
  }
}

.smart-table {
  &__mode-large {
    box-shadow: @shadow-type-1;

    .smart-table {
      &__w-tbody {
        transform: translate3d(0, 0, 0);
        will-change: transform;

        @media screen and (min-width: 769px) {
          .smart-table {
            &__row:hover {
              background: @hover-default;

              .asset__logo {
                .marker {
                  border: 2px solid @custom-asset-marker-border;
                }
              }
            }
          }
        }
      }
    }

    .w-visible {
      min-height: 64px;

      &:first-child {
        .smart-table {
          &__control-cell {
            .cell {
              span.icon {
                span {
                  top: auto;
                  bottom: 0;
                  left: 50%;
                  transform: translate(-50%, 40px);

                  &::after {
                    left: 50%;
                    transform: translate(-50%, -27px) rotate(45deg);
                  }
                }
              }
            }
          }
        }
      }
    }

    .smart-table__row {
      min-width: 768px;

      i.toggler {
        display: none;
      }

      &.spam {
        .smart-table__cell:last-child {
          .cell {
            span.icon svg {
              fill: @color-basic-200;
            }
          }
        }
      }
    }

    .z-top {
      position: relative;
      z-index: 1;
    }

    .smart-table__cell {
      transition: all 0.3s;
      &:first-child {
        min-width: 200px;
      }

      .cell {
        height: @cell-height;

        .decimal-muted {
          display: none;
        }
      }

      &:first-child {
        min-width: 200px;

        .cell {
          min-width: 160px;
          padding-left: 10px;
          justify-content: flex-start;

          .sort-by {
            margin-left: 60px;
          }
        }
      }

      &:last-child {
        padding-right: 5px;
        min-width: 250px;
        width: 250px;
      }
    }

    .smart-table__name .cell {
      .body-2();
      margin: 0;

      span {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 160px;
      }
    }

    .smart-table__available .cell {
      .body-2();
      font-family: @font-roboto-medium;
      margin: 0;
    }

    .smart-table__available-value .cell,
    .smart-table__chart-wrap .cell,
    .smart-table__in-orders .cell {
      .footnote-1();
    }

    .smart-table__change .cell {
      .footnote-1();
      span {
        &.plus {
          color: @color-submit-300;
        }
        &.minus {
          color: @color-error-500;
        }
      }
    }

    .smart-table__w-tbody .w-visible:first-child {
      .smart-table__cell:last-child .cell span.icon span::after {
        transform: translate(-50%, -5px) rotate(45deg);
        top: 0;
      }

      .smart-table__cell:last-child .cell span.icon span {
        transform: translate(-50%, 100%);
        bottom: -5px;
        top: auto;
      }
    }

    .smart-table__cell:last-child {

      .cell {
        display: flex;
        align-items: center;

        .spam-icons {
          span.unspam,
          span.tospam,
          svg {
            display: none;
          }

          &.icon-hide {
            svg:first-child {
              display: inline-block;
            }
            &:hover {
              span.unspam {
                display: none;
              }
              span.tospam {
                display: block;
              }
            }
          }

          &.icon-show {
            svg:first-child + svg {
              display: inline-block;
            }
            &:hover {
              span.unspam {
                display: block;
              }
              span.tospam {
                display: none;
              }
            }
          }
        }

        span.icon {
          z-index: 2;
          display: inline-block;
          width: 18px;
          height: 18px;
          cursor: pointer;
          position: absolute;
          transform: translate3d(0, 0, 0);

          span {
            display: none;
            position: absolute;
            background: @color-basic-700;
            opacity: .8;
            top: 0;
            z-index: 2;
            left: 50%;
            transform: translate(-50%, -40px);
            color: @color-white;
            padding: 10px 15px;
            border-radius: @border-radius;
            .tag-2();
            text-transform: none;

            &::after {
              display: block;
              content: '';
              width: 10px;
              height: 10px;
              background: @color-basic-700;
              position: absolute;
              left: 50%;
              transform: translate(-50%, 5px) rotate(45deg);
            }
          }

          svg {
            fill: @color-basic-500;
            transition: .3s;
            vertical-align: top;
          }

          &:hover {
            span {
              display: block;
            }
            svg {
              fill: @color-basic-700;
            }
          }
        }

        .icon-send {
          right: 181px;
        }

        .icon-receive {
          right: 139px;
          span {
            margin-left: -2px;
          }
          svg {
            transform: rotate(-180deg);
          }
        }
        .icon-dex {
          right: 97px;
        }
        .icon-hide {
          right: 55px;
        }
        .icon-show {
          right: 55px;
        }

      }
    }
  }
}

@media screen and (min-width: 769px) and (max-width: 1180px) {
  .main.wallet.portfolio {
    .smart-table {
      &__mode-large {
        .smart-table__cell[data-column-id="controls"] {
          width: 50px;
          min-width: 50px;
          .cell {
            .icon {
              display: none;
            }
          }
        }
      }
    }
  }
}

//tablet
@media screen and (min-width: 660px) and (max-width: 768px) {
  .main.wallet.portfolio {

    .smart-table {
      &__mode-large {

        .smart-table__row {
          min-width: 100%;
        }

        .smart-table__cell[data-column-id="controls"] {
          display: block;
          width: 50px;
          min-width: 50px;
          .cell {
            .icon {
              display: none;
            }
          }
        }

        .smart-table__cell[data-column-id="mirror"],
        .smart-table__cell[data-column-id="inReserved"] {
          display: none;
        }
      }
    }
  }

  body {

    &.portfolio {
      .portfolio-list {
        w-scroll-box {
          min-height: calc(100vh ~'- 130px');
          max-height: 100%;
        }
      }
    }
  }
}

//mobile
@media screen and (max-width: 769px) {
  .portfolio-wrapper {
    padding: 10px 0 10px 10px;
  }
  .main.wallet.portfolio {

    .mobile-flex {
      display: flex;
      align-items: center;
    }

    .asset__text-mobile {
      .js-stars-container {
        margin-left: 6px;
      }
    }

    .asset__text {
      .js-stars-container {
        display: none;
      }
    }

    .asset-name-desktop {
      display: none;
    }

    .mobiles-only {
      display: flex;
      align-items: center;
      font-family: @font-roboto-regular;
    }

    .main-content .content {
      padding: 0;
    }

    .toolbar {
      width: calc(100% ~'- 10px');

      w-select {
        width: 50px;
        height: 42px;

        .title {
          padding: 0;
          position: relative;
          font-size: 0;
          .icon-filter();
          box-shadow: @shadow-buttons-default;
          border: none;

          &::after {
            display: none;
          }

          .title-content {
            & > span {
              font-size: 0;
              right: 5px;
              top: 5px;
              position: absolute;
            }
          }

          span {
            font-size: 9px;
            display: inline-block;
            padding: 1px 2px;
            background: @color-submit-400;
            color: @white-only;
            border-radius: @border-radius / 2;
            line-height: 1em;
          }
        }

        .select-list {
          left: auto;
          right: 0;
          min-width: 156px;
          margin-top: -1px;
          border-top: 1px solid @color-accent-50;
          border-radius: @border-radius 0 @border-radius @border-radius;
        }
      }
    }
  }

  .smart-table {
    &__mode-large {
      max-height: 100%;

      .smart-table__w-tbody {
        max-height: 100%;
        padding-right: 10px;

        .w-visible {
          margin: 0 0 5px;
          height: 70px !important;
        }

        .smart-table__row {
          padding: 0;
          flex-direction: row;
          flex-wrap: wrap;

          .smart-table__cell {
            padding: 0;
          }

          .smart-table__name {
            min-width: auto;
            .cell {
              overflow: hidden;
              text-overflow: ellipsis;
              width: 100%;
              max-width: 100%;
              padding: 0 5px 0 20px;
              span {
                max-width: 100%;
              }
            }
          }

          .smart-table__control-cell {
            max-width: 50px;
            min-width: 50px;
          }
        }
      }

      .smart-table__row {
        .smart-table__available-value,
        .smart-table__chart-wrap,
        .smart-table__change,
        .smart-table__in-orders {
          display: none;
        }

        .smart-table__cell[data-column-id="name"] {
          flex-basis: 50px;
          max-width: 50px;
        }

        .smart-table__cell[data-column-id="balance"] {
          .cell {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 0 0 0 20px;
          }
        }
      }

      .smart-table__cell {

        .cell {
          height: 40px;
        }

        &:last-child {
          padding: 0 0 10px 20px;
          .cell {
            height: 20px;
            span.icon {
              display: none;
            }
          }
        }
      }
    }
  }
}
